<template>
  <div class="preView">
    <div class="el-carousel__container" style="width: 100%; height: 100%;">
      <el-carousel :interval="4000" height="500px">
        <el-carousel-item v-for="item in imgList" :key="item.id">
          <img :src="item.imgurl" class="carousel-image">
        </el-carousel-item>
      </el-carousel>
    </div>


    <div class="notice">
      <img style="width: 60px; height: 60px; margin-bottom: 10px; " src="@/assets/img/notice.png"
           mode="aspectFit"></img>
      <label style="color: black;font-size: 20px;padding-top: 10px;">公告:</label>
      <div :style="{height:height*lineNum + 'px'}" class="rollScreen_container" id="rollScreen_container"
           style="cursor: pointer;">
        <ul class="rollScreen_list" :style={transform:transform} :class="{rollScreen_list_unanim:num===0}">
          <li class="rollScreen_once" v-for="(item,index) in noticeList" :key=index+noticeList.length
              :style="{height:height+'px'}">
            <span style="font-size: 15px;" @click="noticeClick(item.noticeId)">  {{ item.noticeTitle }}</span>
          </li>
        </ul>
      </div>
      <label style="color: rgb(102,102,102); font-size: 15px; margin-bottom: 20px; margin-left: auto;padding-top: 13px;
      cursor: pointer;" @click="moreNotice">更多>></label>
    </div>


    <div class="numView">
      <div class="numItem" style="background-color: rgb(236,247,255); ">
        <div style="text-align: center;">
          <img style="width: 155px; height: 100px; margin-bottom: 20px; " src="@/assets/img/v.png"
               mode="aspectFit"></img>
        </div>
        <label style="color: rgb(102,102,102); padding-left: 3px; padding-bottom: 10px; font-size: 25px">浏览量</label>
        <label style="color: rgb(102,102,102); padding-left: 3px; padding-bottom: 10px;">Site traffic metric</label>
        <div class="numItemRight">
          <label style="color: black;  font-size: 39px;">{{ viewNum }}</label>
        </div>
      </div>

      <div class="numItem" style="background-color: rgb(236,247,255); ">
        <img style="width: 155px; height: 100px; margin-bottom: 20px;" src="@/assets/img/n.png" mode="aspectFit"></img>
        <label style="color: rgb(102,102,102);  padding-bottom: 10px; font-size: 25px">需求量</label>
        <label style="color: rgb(102,102,102); padding-left: 3px; padding-bottom: 10px;">Quantity of demand </label>
        <div class="numItemRight">
          <label style="color: black;  font-size: 39px; ">{{ needNum }}</label>
        </div>
      </div>

      <div class="numItem" style="background-color: rgb(236,247,255);">
        <img style="width: 155px; height: 100px; margin-bottom: 20px" src="@/assets/img/p.png" mode="aspectFit"></img>
        <label style="color: rgb(102,102,102);  padding-bottom: 10px; font-size: 25px">在研课题</label>
        <label style="color: rgb(102,102,102); padding-left: 3px; padding-bottom: 10px;">Projects in progress</label>
        <div class="numItemRight">
          <label style="color: black;  font-size: 39px; ">{{ topicNum }}</label>
        </div>
      </div>

      <div class="numItem" style="background-color: rgb(236,247,255);">
        <img style="width: 155px; height: 100px; margin-bottom: 20px; " src="@/assets/img/r.png" mode="aspectFit"></img>
        <label style="color: rgb(102,102,102);  padding-bottom: 10px; font-size: 25px">奖励</label>
        <label style="color: rgb(102,102,102);  padding-bottom: 10px;">Number of awards</label>
        <div class="numItemRight">
          <label style="color: black;  font-size: 39px;">{{ awardNum }}</label>
        </div>
      </div>

      <div class="numItem" style="background-color: rgb(236,247,255);">
        <img style="width: 155px; height: 100px; margin-bottom: 20px; " src="@/assets/img/i.png" mode="aspectFit"></img>
        <label style="color: rgb(102,102,102);  padding-bottom: 10px; font-size: 25px">成果量</label>
        <label style="color: rgb(102,102,102);  padding-bottom: 10px;">Quantity of outputs</label>
        <div class="numItemRight">
          <label style="color: black;  font-size: 39px;">{{ ingNum }}</label>
        </div>
      </div>
    </div>

    <div class="listView">
      <!-- 热门课题 -->
      <div class="project">
        <div style="display: flex; align-items: center; justify-content: space-between;margin-top: 10px">
          <label class="title">热门课题</label>
          <label
            style="color: rgb(102,102,102); font-size: 20px; margin-right: 20px;margin-bottom: 5px; cursor: pointer;"
            @click="topicClick">更多>></label>
        </div>
        <div class="projectList">
          <div class="itemView" style="width: calc(25% - 10px); margin-right: 10px"
               v-for="(item, index) in topicList.slice(0, 4)">
            <img class="image-container" style=" margin-top: 10px; max-width: 190px; cursor: pointer;" @click="topicItemClick(item.id)"
                 :src=" item.pic "
                 mode="aspectFit"/>
            <label style="margin-top: 15px; font-weight:bold">{{ item.name }}</label>
            <label style="margin-top: 10px; font-weight:normal">需求人数：{{ item.needNum }}</label>
          </div>
        </div>
      </div>

      <!-- 热门需求 -->
      <div class="command" style="margin-top: 10px">
        <label class="title">热门需求</label>
        <div class="border" >
          <div class="itemView" v-for="(item, index) in needList.slice(0, 5)">
            <div class="commandList">
              <label style="padding-left: 10px;color: cornflowerblue; margin-top: 3px;">{{ index + 1 }}</label>
              <label style="padding-left: 30px; font-weight:normal; cursor: pointer;" @click="needItemClick(item.id)">
                {{ item.name }}</label>
            </div>
            <div class="line"/>
          </div>
          <label style=" font-size: 20px; padding-left: 10%; cursor: pointer;" @click="needClick">更多需求>></label>
        </div>
      </div>
    </div>

    <div class="listView">
      <!-- 热门成果 -->
      <div class="result">
        <div style="display: flex; align-items: center; justify-content: space-between;">
          <label class="title">热门成果</label>
          <label
            style="color: rgb(102,102,102); font-size: 20px; margin-right: 5%; margin-bottom: 5px; cursor: pointer;"
            @click="ingClick">更多>></label>
        </div>
        <div class="resultList">
          <div class="itemView" v-for="(item, index) in ingList.slice(0, 5)"
               style=" width: calc(20% - 25px);margin-right: 10px">
            <img class="image-container" style="border-radius: 10px; margin-top: 10px;cursor: pointer;" @click="ingItemClick(item.id)"
                 :src=" item.pic "
                 mode="aspectFit"/>
            <label style=" margin-top: 15px; font-weight:normal">{{ item.name }}</label>
          </div>
        </div>
      </div>
    </div>


    <div class="sortView" style="background: linear-gradient(to right, #ffffff, rgb(220,242,253));border-radius: 15px">
      <div style="width: 60%; white-space: nowrap; min-height: 100%">
        <div class="title" style="font-weight: bold; margin-left: 15px; text-align: left">积分排行榜</div>
        <div class="rankings-container">
          <div class="ranking-section personal-ranking" style="padding-top: 15px;border-right: 13px solid white" >
            <label style=" font-size: 18px; margin-left: 15px;"><i class="el-icon-s-data"></i> 个人排行榜</label>
            <div class="sortTitle" style="padding-top: 10px; ">
              <label style=" color: rgb(102,102,102); margin-left: 15px;">我的排名： {{ mySort }}</label>
              <label style="color: rgb(102,102,102);  margin-left: auto; margin-right:20px; cursor: pointer;"
                     @click="sortMoreClick">更多排名>></label>
            </div>
            <div id="app" >
              <table class="cool-table" style="margin-bottom: 30px">
                <thead>
                <tr>
                  <th>姓名</th>
                  <th>部门</th>
                  <th>积分</th>
                  <th>排名</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item, index) in sortList.slice(0, 5)">
                  <td>{{ item.nickName }}</td>
                  <td>{{ item.dept.deptName }}</td>
                  <td>{{ item.points }}</td>
                  <td>{{ index + 1 }}</td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div class="ranking-section department-ranking" style="padding-top: 15px;border-right: 13px solid white">
            <label style=" font-size: 18px; margin-left: 15px"><i class="el-icon-s-data"></i> 部门排行榜</label>
            <div class="sortTitle" style="padding-top: 10px; ">
              <label style="color: rgb(102,102,102);  margin-left: auto; margin-right:20px; cursor: pointer;"
                     @click="deptMoreClick">更多排名>></label>
            </div>
            <div id="app" >
              <table class="cool-table">
                <thead>
                <tr>
                  <th>部门</th>
                  <th>积分</th>
                  <th>排名</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item, index) in deptList.slice(0, 5)">
                  <td>{{ item.deptName }}</td>
                  <td>{{ item.totalPoints }}</td>
                  <td>{{ index + 1 }}</td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

      <!--      奖项申报-->
      <div class="awardList" style="width: 40% ;">
        <div class="title" style="font-weight: bold; text-align: left">奖励申报信息</div>
        <div class="awardItem" v-for="(item, index) in awardsList.slice(0, 6)"
             style="display: flex; justify-content: space-between; align-items: center;">
          <span><i class="el-icon-caret-right"
                   style="margin-right: 10px"></i>{{ item.userName}}申报了</span>
          <span>{{ item.name }}</span>
          <span style="margin-left: auto; color: rgb(102,102,102);">{{ item.createTime }}</span>
        </div>
      </div>
    </div>


    <!--    优秀成果展示-->
    <div class="title" style="font-weight: bold;width: 90% ;text-align: left">优秀成果展示</div>
    <div class="ingView">
      <div class="ingItemView" v-for="(item, index) in ingList.slice(0, 5)">
        <img class="ingImg" style="width: 90%; height: 200px; border-radius: 10px; margin-top: 10px;" :src="item.pic"
             mode="aspectFit"/>
        <label class="ingItemlabel">{{ item.innovation }}</label>
      </div>
    </div>
    <el-dialog :title="title" :visible.sync="detailOpen" width="800px" append-to-body>
      <el-form ref="form" :model="form" label-width="0" class="dialog-form">
        <el-row>
          <el-col :span="24">
            <el-form-item label="">
              <div class="dialog-title">
                {{ form.noticeTitle }}
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item>
              <div v-html="form.noticeContent" class="rich-text-content"></div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel" size="medium">关闭</el-button>
      </div>
    </el-dialog>

  </div>

</template>

<script>
import {getCount} from "@/api/home";
import {getAllUserByPoints} from "@/api/system/user";
import {getNotice, selectNoticeListNew} from "@/api/system/notice";
import {getUserAwardsInfo} from "../api/project/awards";
import {getAllDeptByPoints} from "../api/system/user";

export default {
  props: {
    height: {
      default: 40,
      type: Number
    },
    lineNum: {
      default: 1,
      type: Number
    }
  },
  name: "Index",
  data() {
    return {
      title: "",
      detailOpen: false,
      form: {},
      viewNum: undefined,//浏览量
      needNum: undefined,//需求数
      ingNum: undefined,//成果量
      awardNum: undefined,//成果量
      topicNum: undefined,//在研课题量
      needList: [],
      topicList: [],
      ingList: [],
      awardsList: [],
      deptList:[],
      interviewGoal: 50,
      mySort: null,
      sortList: [],
      //轮播
      noticeList: [],
      intervalId: null, // 定时器ID
      intervalDuration: 3000,// 轮播间隔时间，单位毫秒
      num: 0,//轮播  当前展示的第几个公告
      // 查询参数
      queryParams: {
        userId: null,
        userName: null,
        userType: null,
        email: null,
        createTime: null,
      },
      imgList: [
        {id: 0, imgurl: require("@/assets/img/index-banner.jpg")},
        {id: 1, imgurl: require("@/assets/img/index-banner1.jpg")},
        {id: 2, imgurl: require("@/assets/img/banner1.jpg")},
        {id: 3, imgurl: require("@/assets/img/banner2.jpg")},
        {id: 4, imgurl: require("@/assets/img/banner3.jpg")}
      ]
    };
  },

  computed: {//轮播
    transform: function () {
      return 'translateY(-' + this.num * this.height + 'px)'
    },
  },
  created() {
    this.getCount();
    this.getAllUserByPoints();
    this.getAllDeptByPoints();
    this.getUserAwardsInfo();
    selectNoticeListNew(this.queryParams).then(response => {
      this.noticeList = response.rows;
    });
  },
  methods: {
    startCarousel() {
      this.intervalId = setInterval(() => {
        this.num = (this.num + 1) % this.noticeList.length;
      }, this.intervalDuration);
    },
    stopCarousel() {
      clearInterval(this.intervalId);
    },
    cancel() {
      this.detailOpen = false;
      this.reset();
    },
    moreNotice() {
      this.$router.push("/notificationList");
    },
    /** 查看详情 */
    noticeClick(noticeId) {
      getNotice(noticeId).then(response => {
        this.form = response.data;
        this.detailOpen = true;
        this.title = " ";
      });
    },
    reset() {
      this.form = {
        noticeId: null,
        noticeTitle: null,
        noticeType: null,
        noticeContent: null,
        status: "0"
      };
      this.resetForm("form");
    },
    needClick() {
      // this.$router.push("/user/profile");
      this.$router.push("/demandList");
    },
    needItemClick(id) {
      // this.$router.push("/user/profile");
      this.$router.push({path : '/demandDetail', query: { "id" : id ,"from" : 1} });
    },
    topicClick() {
      // this.$router.push("/user/profile");
      this.$router.push("/topicList");
    },
    topicItemClick(id) {
      // this.$router.push("/user/profile");
      this.$router.push({path : '/topicDetail', query: { "id" : id ,"from" : 1} });
    },
    ingClick() {
      // this.$router.push("/user/profile");
      this.$router.push("/ingList");
    },
    ingItemClick(id) {
      // this.$router.push("/user/profile");
      this.$router.push({path : '/ingDetail', query: { "id" : id ,"from" : 1} });
    },

    sortMoreClick() {
      this.$router.push("/sortList");
    },
    deptMoreClick() {
      this.$router.push("/deptList");
    },
    getCount() {
      getCount().then(response => {
        this.viewNum = response.viewCount;
        this.needNum = response.needCount;
        this.ingNum = response.achievementCount;
        this.awardNum = response.awardsCount;
        this.topicNum = response.topicCount;
        this.needList = response.demandList;
        this.topicList = response.topicList;
        this.ingList = response.achievementList;
        this.awardsList = response.awardsList;

        for (let i = 0; i < this.topicList.length; i++) {
          this.topicList[i].pic = process.env.VUE_APP_BASE_API + this.topicList[i].pic;
        }

        for (let i = 0; i < this.ingList.length; i++) {
          this.ingList[i].pic = process.env.VUE_APP_BASE_API + this.ingList[i].pic;
        }
      })
    },
    getAllUserByPoints() {
      getAllUserByPoints().then(response => {
        this.sortList = response.list;
        this.mySort = response.mySort;
      })
    },
    getAllDeptByPoints() {
      getAllDeptByPoints().then(response => {
        this.deptList = response.rows;
      })
    },
    getUserAwardsInfo(){
      getUserAwardsInfo().then(response =>{
        this.awardsInfoList = response.data;
      })
    },
  },
  mounted() {
    // 开始轮播
    this.startCarousel();
  },
  beforeDestroy() {
    // 清理定时器
    this.stopCarousel();
  }
};
</script>

<style scoped lang="scss">

.rankings-container {
  display: flex;
  justify-content: space-between;
  gap: 20px; /* 可根据需要调整 */
}

.ranking-section {
  flex: 1; /* 使每个部分占据相等宽度 */
}

.ranking-table {
  margin-top: 10px;
}

//.personal-ranking {
//  background-color: #ebf9fb; /* 浅蓝色背景 */
//}
//
//.department-ranking {
//  background-color: #f1f6f1; /* 浅绿色背景 */
//}


#app {
  width: 100%;
  margin: 0 auto; /* 居中显示 */
  font-size: 15px;
}

.cool-table {
  border-spacing: 0;
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px; /* 可以根据需要调整上边距 */
}

.cool-table th, .cool-table td {
  padding: 7px 10px; /* 上下5px，左右10px */
  text-align: center;
  line-height: 1.5; /* 适当调整行高 */
}

.cool-table th { /*表头*/
  //background-color: white;
  color: #333;
  font-weight: bold;
  font-size: 18px;
  line-height: 1.5; /* 适当调整行高 */
}

//.cool-table tbody tr:nth-child(even) {
//  background-color: white;
//}


.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensure the image covers the entire carousel item */
}

.el-carousel__item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  height: 500px; /* 设置轮播项的高度，与组件的 height 属性一致 */
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

// 整个背景颜色
.preView {
  display: flex;
  flex-direction: column;
  background-color: white;
  justify-content: space-around;
  align-items: center;
  width: 100%; /* 使用百分比来设置宽度 */
  max-width: 2400px; /* 设置最大宽度，避免在大屏幕上过度拉伸 */
  margin: 0 auto; /* 在大屏幕上居中显示 */
  padding: 20px; /* 添加内边距 */
  box-sizing: border-box; /* 确保 padding 不会增加元素的宽度 */
}

.dialog-form {
  padding: 20px;
}

.dialog-title {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

.rich-text-content {
  line-height: 1.6;
}

.dialog-footer {
  text-align: center;
  padding: 10px 0;
}

.notice {
  height: 70%;
  display: flex;
  flex-direction: row;
  background-color: rgb(255, 255, 255);
  margin-top: 10px;
  border-radius: 20px; //设置圆角
  width: 95%;
}


// 设置浏览量，需求量等的白色背景
.numView {
  display: flex;
  flex-direction: row;
  background-color: rgb(255, 255, 255);
  justify-content: space-around;
  margin-top: 10px;
  border-radius: 20px; //设置圆角
  width: 92%;
}

.numItem {
  padding: 0px 35px 20px 20px;
  display: flex;
  flex-direction: column;
  margin-top: 0px; //设置与上面容器的距离
  margin-bottom: 20px;
  position: relative;
  border-radius: 20px; //设置圆角
  text-align: center;
}

.numItem:hover {
  transform: scale(1.05); /* 鼠标移入时放大 */
}



.numItemRight {
  display: flex;
  flex-direction: column;
  // margin-left: 30px;
  text-align: center;
}
.title {
  font-size: 25px;
  margin-bottom: 25px;
  color: black;
  letter-spacing: 3px; /* 这里设置字体间距 */
  position: relative;
  padding-left: 20px;
}

.title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 5px; /* 竖条的宽度 */
  height: 100%; /* 使竖条的高度与标题一致 */
  background-color: #1390da; /* 竖条的颜色 */
}

.project {
  flex: 1;
  display: flex;
  flex-direction: column;
  max-width: 70%;
}

.projectList {
  margin-top: 18px;
  display: flex;
  flex-direction: row;
}

.command {
  flex: 1;
  display: flex;
  margin-left: 20px;
  flex-direction: column; //竖着排列
  margin-bottom: 40px;
  max-width: 30%;
}


.commandList {
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 10px;
  font-size: 15px;
}
.commandList :hover {
  transform: scale(1.05); /* 鼠标移入时放大 */
}



.result {
  flex: 1;
  display: flex;
  flex-direction: column; //竖着排列
}

.resultList {
  display: flex;
  flex-direction: row; //竖着排列
  margin-bottom: 20px;
  // margin-left: 10px;
  // margin-right: 20px;
  font-size: 17px;
}

.border {
  padding-bottom: 20px;
  padding-top: 20px;
  /* 给顶部、右侧和底部设置边框 */
  border-top: 1.5px solid #7ac5fa;
  border-left: 1.5px solid #7ac5fa;
  border-bottom: 1.5px solid #7ac5fa;

  /* 不设置左边的边框 */
  border-right: none;
  border-image-source: linear-gradient(to right, #7ac5fa, rgba(222, 240, 250, 0.93));
  border-image-slice: 1;
}

.image-container {
  width: 100%; /* 图片宽度占据父容器的100% */
  height: 200px; /* 自动调整高度，保持比例 */
  border-radius: 10px;
  overflow: hidden; /* 超出容器部分隐藏 */

}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片填充容器，保持宽高比 */
  transition: transform 0.3s ease;
  transform: scale(0.9); /* 初始缩小一些 */
}

.image-container:hover {
  transform: scale(1.05); /* 鼠标移入时放大 */
}


.listView {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 92%;
  margin-top: 35px;
  margin-bottom: 20px;
  overflow-x: auto;
}

.itemView {
  display: flex;
  flex-direction: column;
}

.line {
  width: 90%;
  height: 0.5px;
  margin-left: 3%;
  margin-bottom: 15px;
  background: #d4c4c4;
  position: relative;
  text-align: center;
}

.label {
  margin: 12px 10px 12px 5%;
  font-size: 10px;
  font-weight: lighter;
  font-style: normal;
}


//排名的设置
.sortView {
  display: flex;
  flex-direction: row;
  background-color: white;
  padding-top: 20px;
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 30px;
  width: 95%;
  height: 100%; /* 设置整体高度 */
}

.awardList {
  display: flex;
  flex-direction: column;
  margin-left: 25px;
  min-height: 100%; /* 保持高度一致 */
  overflow-y: auto; /* 添加滚动条 */

}

.awardItem {
  font-size: 17px;
  font-weight: normal;
  line-height: 3;
  white-space: nowrap;
}


.sortTitle {
  display: flex;
  flex-direction: row;
  height: 40px;
  align-items: center;
}

.sortItem {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 15px;
  margin-bottom: 15px;
}

.ingView {
  width: 90%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.ingItemView {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  background-color: white;
  align-items: center;
  width: 19%;
  margin-bottom: 20px;
}
.ingImg:hover{
  transform: scale(1.05);
}

.ingItemlabel {
  font-weight: lighter;
  font-size: 15px;
  line-height: 20px;
  margin: 10px;
  width: 200px; /* 设定一定的宽度 */
  max-height: 60px;
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 显示省略号 */
}


//轮播
.notiViewContainer {
  display: flex;
  background-color: white;
  width: 100%;
  align-items: flex-end;
}

.rollScreen_container {
  display: flex;
  position: relative;
  overflow: hidden;
  margin-bottom: 10px;

}

.rollScreen_list {
  transition: 1s linear;
  color: rgb(102, 102, 102);
}

.rollScreen_list_unanim {
  transition: none;
}

</style>

